<template>
  <el-form
    :model="formData"
    ref="vForm"
    :rules="rules"
    label-position="left"
    label-width="80px"
    size="default"
    @submit.prevent
  >
    <el-form-item label="input" prop="input45052">
      <el-input v-model="formData.input45052" type="text" clearable></el-input>
    </el-form-item>
    <el-form-item label="textarea" prop="textarea91750">
      <el-input type="textarea" v-model="formData.textarea91750" rows="3"></el-input>
    </el-form-item>
    <el-form-item label="number" prop="number48507">
      <el-input-number
        v-model="formData.number48507"
        class="full-width-input"
        controls-position="right"
        :min="-100000000000"
        :max="100000000000"
        :precision="0"
        :step="1"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="radio" prop="radio64073">
      <el-radio-group v-model="formData.radio64073">
        <el-radio
          v-for="(item, index) in radio64073Options"
          :key="index"
          :label="item.value"
          :disabled="item.disabled"
          style="
             {
              display: inline;
            }
          "
          >{{ item.label }}</el-radio
        >
      </el-radio-group>
    </el-form-item>
    <el-form-item label="checkbox" prop="checkbox20656">
      <el-checkbox-group v-model="formData.checkbox20656">
        <el-checkbox
          v-for="(item, index) in checkbox20656Options"
          :key="index"
          :label="item.value"
          :disabled="item.disabled"
          style="
             {
              display: inline;
            }
          "
          >{{ item.label }}</el-checkbox
        >
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="select" prop="select26541">
      <el-select v-model="formData.select26541" class="full-width-input" clearable>
        <el-option
          v-for="(item, index) in select26541Options"
          :key="index"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="time" prop="time29211">
      <el-time-picker
        v-model="formData.time29211"
        class="full-width-input"
        format="HH:mm:ss"
        value-format="HH:mm:ss"
        clearable
      ></el-time-picker>
    </el-form-item>
    <el-form-item label="time-range" prop="timerange95603">
      <el-time-picker
        is-range
        v-model="formData.timerange95603"
        class="full-width-input"
        format="HH:mm:ss"
        value-format="HH:mm:ss"
        clearable
      ></el-time-picker>
    </el-form-item>
    <el-form-item label="file-upload" prop="fileupload108870">
      <el-upload
        :file-list="fileupload108870FileList"
        :headers="fileupload108870UploadHeaders"
        :data="fileupload108870UploadData"
        action="http://127.0.0.1:4523/mock/517401/file"
        multiple
        show-file-list
        :limit="3"
      >
        <template #default>
          <el-button type="primary" link>上传文件</el-button>
        </template></el-upload
      >
    </el-form-item>
    <el-form-item label="rich-editor" prop="richeditor105024">
      <vue-editor v-model="formData.richeditor105024"></vue-editor>
    </el-form-item>
    <el-form-item label="cascader" prop="cascader95545">
      <el-cascader
        v-model="formData.cascader95545"
        class="full-width-input"
        :options="cascader95545Options"
        clearable
      ></el-cascader>
    </el-form-item>
    <div class="static-content-item">
      <el-alert
        title="Good things are coming..."
        type="info"
        :closable="true"
        :center="true"
        :show-icon="false"
        effect="light"
      >
      </el-alert>
    </div>
    <el-form-item label="picture-upload" prop="pictureupload58095">
      <el-upload
        class="dynamicPseudoAfter"
        :file-list="pictureupload58095FileList"
        :headers="pictureupload58095UploadHeaders"
        :data="pictureupload58095UploadData"
        list-type="picture-card"
        show-file-list
        :limit="3"
      >
        <template #default>
          <el-icon>
            <Plus />
          </el-icon> </template
      ></el-upload>
    </el-form-item>
    <div class="static-content-item">
      <el-button>button</el-button>
    </div>
    <div class="static-content-item">
      <el-divider direction="horizontal"></el-divider>
    </div>
    <div class="static-content-item">
      <div v-html="'<b>html text</b>'"></div>
    </div>
    <div class="static-content-item">
      <div>static text</div>
    </div>
    <el-form-item label="rate" prop="rate36713">
      <el-rate v-model="formData.rate36713"></el-rate>
    </el-form-item>
    <el-form-item label="switch" prop="switch83101">
      <el-switch v-model="formData.switch83101"></el-switch>
    </el-form-item>
    <el-form-item label="color" prop="color32561">
      <el-color-picker v-model="formData.color32561"></el-color-picker>
    </el-form-item>
    <el-form-item label="slider" prop="slider95263">
      <el-slider v-model="formData.slider95263" :step="10"></el-slider>
    </el-form-item>
  </el-form>
</template>

<script>
import { defineComponent, toRefs, reactive, getCurrentInstance } from 'vue'
export default defineComponent({
  components: {},
  props: {},
  setup() {
    const state = reactive({
      formData: {
        input45052: '',
        textarea91750: '',
        number48507: 0,
        radio64073: null,
        checkbox20656: [],
        select26541: '',
        time29211: null,
        timerange95603: null,
        fileupload108870: null,
        richeditor105024: null,
        cascader95545: '',
        pictureupload58095: null,
        rate36713: null,
        switch83101: false,
        color32561: null,
        slider95263: null
      },
      rules: {},
      radio64073Options: [
        {
          label: 'radio 1',
          value: 1
        },
        {
          label: 'radio 2',
          value: 2
        },
        {
          label: 'radio 3',
          value: 3
        }
      ],
      checkbox20656Options: [
        {
          label: 'check 1',
          value: 1
        },
        {
          label: 'check 2',
          value: 2
        },
        {
          label: 'check 3',
          value: 3
        }
      ],
      select26541Options: [
        {
          label: 'select 1',
          value: 1
        },
        {
          label: 'select 2',
          value: 2
        },
        {
          label: 'select 3',
          value: 3
        }
      ],
      cascader95545Options: [
        {
          label: 'select 1',
          value: 1,
          children: [
            {
              label: 'child 1',
              value: 11
            }
          ]
        },
        {
          label: 'select 2',
          value: 2
        },
        {
          label: 'select 3',
          value: 3
        }
      ],
      fileupload108870FileList: [],
      fileupload108870UploadHeaders: {},
      fileupload108870UploadData: {},
      pictureupload58095FileList: [],
      pictureupload58095UploadHeaders: {},
      pictureupload58095UploadData: {}
    })
    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.proxy.$refs['vForm'].validate((valid) => {
        if (!valid) return
        //TODO: 提交表单
      })
    }
    const resetForm = () => {
      instance.proxy.$refs['vForm'].resetFields()
    }
    const formEventHandlers = {}

    window.$fd = state.formData
    return {
      ...toRefs(state),
      submitForm,
      resetForm,
      formEventHandlers
    }
  }
})
</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: '';
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}
</style>
